import AnimalCard from './components/AnimalCard';
import Link from 'next/link';

export default function Home() {
  const animals = [
    {
      emoji: '🐶',
      name: 'Dog',
      description: 'Man\'s best friend, known for loyalty and playfulness.',
      bgColor: 'bg-blue-200'
    },
    {
      emoji: '🐱',
      name: 'Cat',
      description: 'Independent and curious, cats make wonderful companions.',
      bgColor: 'bg-orange-200'
    },
    {
      emoji: '🐰',
      name: 'Rabbit',
      description: 'Gentle and social animals with distinctive long ears.',
      bgColor: 'bg-green-200'
    },
    {
      emoji: '🐦',
      name: 'Bird',
      description: 'Feathered friends that bring joy with their songs and colors.',
      bgColor: 'bg-yellow-200'
    },
    {
      emoji: '🐠',
      name: 'Fish',
      description: 'Colorful aquatic creatures that are peaceful to watch.',
      bgColor: 'bg-cyan-200'
    },
    {
      emoji: '🐢',
      name: 'Turtle',
      description: 'Slow-moving reptiles known for their protective shells.',
      bgColor: 'bg-emerald-200'
    }
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8 text-center">
        <Link href="/manus" className="inline-block bg-primary text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition">
          Visit Manus Page Demo
        </Link>
      </div>
      
      <h1 className="text-4xl font-bold text-center mb-8">Animal Demo</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {animals.map((animal, index) => (
          <AnimalCard
            key={index}
            emoji={animal.emoji}
            name={animal.name}
            description={animal.description}
            bgColor={animal.bgColor}
          />
        ))}
      </div>
    </div>
  );
} 